<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录页面-</title>

    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script><!--axios-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--vue插件-->
</head>
<body>
<div class="wrap login_wrap" id="app">
    <div class="content">
        <div class="logo"></div>
        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    登录
                </div>
                <form action="#" method="post">

                    <div class="form_text_ipt">
                        <input name="username" type="text" placeholder="Name" v-model="user.name">
                    </div>
                    <div class="form_text_ipt">
                        <input name="password" type="password" placeholder="Password" v-model="user.password">
                    </div>
                    <div class="form_btn">
                        <button type="button" @click="login">登录</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>还没有帐号？</span><a href="register.html">马上注册</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="text-align:center;">

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {}
        },
        methods: {
            login: function () {
                var that = this;
                axios.post("/user/login", that.user).then(function (res) {
                    this.resData = res.data;
                    if (resData.code) {
                        window.sessionStorage.setItem('token', resData.extend.token);//保存token
                        window.location.href = "/index.html";
                    } else {
                        alert(resData.extend.err)
                    }
                })

            }

        }
    })
</script>


</body>
</html>
